<template>
  <div id="bonus-dividend">
    <c-title :hide="false" :text="plugin_name" />
    <header class="header">
      <div class="header-left">
        <img class="photo" :src="avatar_image" />
        <span class="nick-name">{{ username }}</span>
      </div>
      <div class="header-right" @click="Exchange">兑换权益</div>
    </header>
    <main class="main">
      <article class="next-total-price">
        <h4 class="c-202020">下月奖金池累计金额</h4>
        <p class="c-f15353">￥{{ top_info.bonus_pool_accumulate_amount }}</p>
      </article>
      <article class="share-dividend">
        <div class="share-dividend-left">
          <h4 class="c-f15353">{{ top_info.dividend_equity }}%</h4>
          <p class="mt-1">可分红权益值</p>
        </div>
        <div class="share-dividend-right">
          <h4 class="c-f15353">{{ top_info.expect_dividend_amount }}</h4>
          <p class="mt-1">下月预计分红金额</p>
        </div>
      </article>
      <p class="hint c-f15353">提示：每月{{ top_info.settlement_time }}号结算上个月的分红</p>
    </main>
    <footer class="footer">
      <van-tabs v-model="active" @click="HandlerRecord">
        <van-tab title="分红记录" name="share_record"></van-tab>
        <van-tab title="兑换记录" name="exchange_record"></van-tab>
      </van-tabs>
      <template v-if="active == 'share_record'">
        <van-cell v-for="item in share_record.data" :key="item.id">
          <template #title>
            <div class="cell-title-left">
              <p class="c-202020">分红ID:{{ item.id }}</p>
              <p class="time">时间：{{ item.created_at }}</p>
            </div>
          </template>
          <template #default>
            <div class="c-f15353">￥{{ item.dividend_amount }}</div>
          </template>
        </van-cell>
      </template>
      <template v-if="active == 'exchange_record'">
        <van-cell v-for="item in exchange_record.data" :key="item.id">
          <template #title>
            <div class="cell-title-left">
              <p class="c-202020">权益兑换ＩD:{{ item.id }}</p>
              <p class="time">时间：{{ item.created_at }}</p>
            </div>
          </template>
          <template #default>
            <div class="cell-title-right">
              <p class="c-f15353">+{{ item.dividend_equity }}%</p>
              <p class="c-666">{{ item.love }}爱心值兑换</p>
            </div>
          </template>
        </van-cell>
      </template>
    </footer>
  </div>
</template>

<script>
import { Toast } from "vant";
import { scrollMixin } from "../../utils/mixin";
export default {
  data() {
    return {
      active: "share_record",
      top_info: {}, //头部信息
      avatar_image: "", //头像
      username: "", //昵称
      share_record: {}, //分红记录
      exchange_record: {}, //兑换记录
      isLoadMore: false,
      plugin_name:''
    };
  },
  mixins: [scrollMixin],
  activated() {
    console.log(this.$route)
    this.init();
    this.getData();
  },
  methods: {
    init() {
      this.isLoadMore = false;
    },
    HandlerRecord(){
      this.getData()
    },
    getData() {
      let log_type = this.active == "share_record" ? 1 : 2;
      $http
        .post("plugin.zhp-bonus-pool.frontend.reward-log.get-reward-list", { log_type }, "")
        .then(res => {
          this.isLoadMore = true;
          if (res.result == 1) {
            this.plugin_name = res.data.plugin_name
            this.top_info = res.data.top_info;
            this.avatar_image = res.data.top_info.memberInfo.avatar_image;
            this.username = res.data.top_info.memberInfo.username;
            this[this.active] = res.data.list;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    getMoreData() {
      this.isLoadMore = false;
      if (this[this.active].current_page >= this[this.active].last_page) {
        return;
      } else {
        let log_type = this.active == "share_record" ? 1 : 2;
        $http
          .post("plugin.zhp-bonus-pool.frontend.reward-log.get-reward-list", { log_type, page: this[this.active].current_page + 1 }, "")
          .then(res => {
            this.isLoadMore = true;
            if (res.result == 1) {
              this[this.active].data = this[this.active].data.concat(res.data.list.data);
              this[this.active].current_page = res.data.list.last_page
            }
          })
          .catch(err => {
            console.log(err);
          });
      }
    },
    Exchange() {
        this.$router.push(this.fun.getUrl("Exchange", {settlement_time:this.top_info.settlement_time}));
    }
  }
};
</script>

<style lang="scss" scoped>
#bonus-dividend {
  .header {
    width: 100%;
    height: 8rem;
    background-color: #ee2e2b;
    display: flex;
    justify-content: space-between;
    padding: 2rem 1rem 0 2rem;

    &-left {
      display: flex;
    }

    img {
      margin: 0;
    }

    &-right {
      width: 5rem;
      height: 2rem;
      line-height: 2rem;
      text-align: center;
      color: #ee2e2b;
      background-color: #fff;
      border-radius: 1rem;
    }
  }

  .nick-name {
    margin-left: 1rem;
    color: #fff;
  }

  .photo {
    width: 3rem;
    height: 3rem;
    border-radius: 100px;
  }

  .c-f15353 {
    color: #f15353;
  }

  .c-202020 {
    color: #202020;
  }

  .mt-1 {
    margin-top: 1rem;
  }

  .c-666 {
    color: #666;
  }
}

.main {
  .next-total-price {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #ebebeb;
    padding: 1rem;
    background-color: #fff;
  }

  .share-dividend {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    padding: 1rem 4rem;
  }

  .hint {
    padding: 1rem;
    text-align: left;
  }
}

.footer {
  .cell-title-left {
    text-align: left;
    width: 12rem;
  }

  .time {
    color: #666;
  }

  .cell-title-right {
    text-align: right;
  }
}
</style>
